<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script type='text/javascript' src='./04/js/vue.js'></script>
</head>

<body>
    <div id='app'>
        {{msg}}====={{msg2}}

        <hr>
        <father :aa='msg' @fun='showA'></father>


        <hr>

        <borther></borther>
        <sister></sister>
    </div>
    <script type='text/javascript'>
    var  Bus=new  Vue();
        /* 
        创建组件三步走
        1、创建模板对象
        2、挂载模板
        3、填坑
         */

        var son = {
            data() {
                return {
                    s1: '我是son的值'
                }
            },
            template: `<p calss='son' >
                我是一个son组件===={{bb}}=  <input value='son'  type='button' @click='$emit("funF",s1)'>
             </p>`,
            props: ['bb']
        }

        var father = {
            data() {
                return {
                    f1: '我是father中的f1',
                    f2: ''
                }
            },
            template: `<div calss='father'>===
                我是一个father组件==={{aa}}=.======
                <input value='father'  type='button' @click='$emit("fun",f1)'>=={{f2}}
                <son @funF='showF' :bb='f1'></son>=====
             </div>`,
            components: {
                son
            },
            props: ['aa'],
            methods: {
                showF(message) {
                    console.log(message, 123);
                    this.f2 = message
                }
            }
        }




        var sister = {
            data() {
                return {
                    st1: '我是sister的值',
                    sval:''
                }
            },
            template: `<p calss='sister' >
                我是一个sister组件==== <input value='sister'  type='button' >=={{sval}}
             </p>`,
             mounted(){
                 Bus.$on('qqqq',(val)=>{
                    this.sval=val
                 })
             }
        }


        var borther = {
            data() {
                return {
                    st1: '我是borther的值'
                }
            },
            template: `<p calss='borther'>
                我是一个borther组件==== <input @click='toS' value='borther'  type='button' >
             </p>`,
             methods:{
                toS(){
                    Bus.$emit('qqqq',this.st1)
                }
             }
        }



        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue',
                msg2: ''
            },
            components: {
                father,
                borther,
                sister
            },
            methods: {
                showA(message) {
                    console.log(message, 123);
                    this.msg2 = message
                }
            }
        });
    </script>
</body>

</html>